import { React, useRef } from 'react';
import './sitechange.css';
import '../../../index.css';
import { useLocation, useNavigate } from 'react-router';
import InterIP from '../../../IP/IP';
import axios from 'axios';

export default function Sitechange() {

    let IP = InterIP().props.children;
    const data = useLocation();
    const changeName = useRef();
    const changearea = useRef();
    const changestreet = useRef();
    const changephone = useRef();
    const changecomment = useRef();
    const navigate = useNavigate()

    console.log(data);

    function changeSite() {
        var userID = document.cookie.slice(5);
        axios.post("http://" + IP + ":3000/user/updateAddress", {
            consignee: changeName.current.value,
            area: changearea.current.value,
            street: changestreet.current.value,
            contact_phone: changephone.current.value,
            comment: changecomment.current.value,
            user_id: userID,
            default_address: data.state.data.default_address,
            address_id: data.state.data.address_id,
        })
            .then((res) => {
                console.log(res);
                navigate('/home/person/regulator', {})
            })
    }

    return (
        <div id="mybill">
            <div className="mybill_top">编辑地址</div>
            <div className="augment_main">
                <ul className="tyc_area">
                    <li>
                        <span>*</span>
                        <strong>收货人姓名：</strong>
                        <input type="text" placeholder="收货人姓名" defaultValue={data.state.data.consignee} ref={changeName} />
                    </li>
                    <li>
                        <span>*</span>
                        <strong>选择地区：</strong>
                        <input type="text" placeholder="收货人地区" defaultValue={data.state.data.area} ref={changearea} />
                    </li>
                    <li>
                        <span>*</span>
                        <strong>详细地址：</strong>
                        <input type="text" placeholder="用于接收货物的详细地址" defaultValue={data.state.data.street} ref={changestreet} />
                    </li>
                    <li>
                        <span>*</span>
                        <strong>联系电话：</strong>
                        <input type="text" placeholder="推荐使用手机号" defaultValue={data.state.data.contact_phone} ref={changephone} />
                    </li>
                    <li>
                        <span>*</span>
                        <strong>备注信息：</strong>
                        <input type="text" placeholder="输入备注" defaultValue={data.state.data.comment} ref={changecomment} />
                    </li>
                </ul>
                <button className="augment_button" onClick={changeSite}>确定修改</button>
            </div>
        </div>
    )
}